<!DOCTYPE html>
<html lang="ch">
<head>

    <meta charset="utf-8">

    <title>简洁高效|一站式导航|技术|社区|摸鱼|财经</title>

    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">

    <!-- stylesheets css -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.min.css">

    <link rel="stylesheet" href="css/et-line-font.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">

    <link rel="stylesheet" href="css/vegas.min.css">
    <link rel="stylesheet" href="css/style.css">

    <link rel="stylesheet" href="static/css/bootstrap.css">
    <link rel="stylesheet" href="static/css/bootstrap-bbs.css">
    <link rel="stylesheet" href="static/css/newIndex.css">
    <link rel="stylesheet" href="static/css/common.css">
    <link rel="stylesheet" href="static/css/quanxin_new_1.css">
    <link rel="stylesheet" href="static/css/font_1004935_lk27j4etgh.css">
    <link rel="stylesheet" href="static/css/font_1182862_riuhh3xpvus.css">

    <style type="text/css">
        html {
            width: 100%;
            height: 100%;
        }

        .bigbox {
            width: 10px;
            height: 10px;
            margin: 200px 400px;
            position: relative;
        }

        .box {
            width: 500px;
            height: 300px;
            margin: 0 auto;
            transform-style: preserve-3d;
            transform: rotateX(-30deg) rotateY(-80deg);
            -webkit-animation: mystyle 15s infinite;
            animation-timing-function: linear;
        }

        @-webkit-keyframes mystyle {
            from {
                transform: rotateX(-180deg) rotateY(-180deg);
            }
            to {
                transform: rotateX(180deg) rotateY(180deg);
            }
        }

        .box div {
            position: absolute;
            width: 200px;
            height: 200px;
            opacity: 0.8;
            transition: all .4s;
        }

        .bigpic {
            width: 200px;
            height: 200px;
        }

        .box .bigfront {
            transform: rotateY(0deg) translateZ(100px);
        }

        .box .bigback {
            transform: translateZ(-100px) rotateY(180deg);
        }

        .box .bigleft {
            transform: rotateY(90deg) translateZ(100px);
        }

        .box .bigright {
            transform: rotateY(-90deg) translateZ(100px);
        }

        .box .bigtop {
            transform: rotateX(90deg) translateZ(100px);
        }

        .box .bigbottom {
            transform: rotateX(-90deg) translateZ(100px);
        }

        .box span {
            display: block;
            position: absolute;
            width: 140px;
            height: 140px;
            top: 25px;
            left: 25px;
        }

        .box .smallpic {
            width: 140px;
            height: 140px;
        }

        .box .smallleft {
            transform: rotateY(90deg) translateZ(70px);
        }

        .box .smallright {
            transform: rotateY(-90deg) translateZ(70px);
        }

        .box .smalltop {
            transform: rotateX(90deg) translateZ(70px);
        }

        .box .smallbottom {
            transform: rotateX(-90deg) translateZ(70px);
        }

        .box .smallfront {
            transform: rotateY(0deg) translateZ(70px);
        }

        .box .smallback {
            transform: translateZ(-70px) rotateY(180deg);
        }

        /*:hover 我们之前说过的一个css选择器，能够让鼠标指向的时候触发*/
        .box:hover .bigleft {
            transform: rotateY(90deg) translateZ(300px);
        }

        .box:hover .bigright {
            transform: rotateY(-90deg) translateZ(300px);
        }

        .box:hover .bigtop {
            transform: rotateX(90deg) translateZ(300px);
        }

        .box:hover .bigbottom {
            transform: rotateX(-90deg) translateZ(300px);
        }

        .box:hover .bigfront {
            transform: rotateY(0deg) translateZ(300px);
        }

        .box:hover .bigback {
            transform: translateZ(-300px) rotateY(180deg);
        }
    </style>

    <!--<link href='http://fonts.useso.com/css?family=Rajdhani:400,500,700' rel='stylesheet' type='text/css'>-->

</head>
<body>

<!-- preloader section -->
<section class="preloader">
    <div class="sk-circle">
        <div class="sk-circle1 sk-child"></div>
        <div class="sk-circle2 sk-child"></div>
        <div class="sk-circle3 sk-child"></div>
        <div class="sk-circle4 sk-child"></div>
        <div class="sk-circle5 sk-child"></div>
        <div class="sk-circle6 sk-child"></div>
        <div class="sk-circle7 sk-child"></div>
        <div class="sk-circle8 sk-child"></div>
        <div class="sk-circle9 sk-child"></div>
        <div class="sk-circle10 sk-child"></div>
        <div class="sk-circle11 sk-child"></div>
        <div class="sk-circle12 sk-child"></div>
    </div>
</section>

<!-- home section -->
<section id="home">
    <div class="container" style="height: 100%;">

        <div class="bigbox">
            <div class="box">
                <div class="bigfront">
                    <img src="static/img/one/1.jpg" class="bigpic">
                </div>
                <div class="bigback">
                    <img src="static/img/one/2.jpg" class="bigpic">
                </div>
                <div class="bigleft">
                    <img src="static/img/one/3.jpg" class="bigpic">
                </div>
                <div class="bigright">
                    <img src="static/img/one/4.jpg" class="bigpic">
                </div>
                <div class="bigtop">
                    <img src="static/img/one/5.jpg" class="bigpic">
                </div>
                <div class="bigbottom">
                    <img src="static/img/one/6.jpg" class="bigpic">
                </div>
                <span class="smallfront">
          <img src="static/img/one/7.jpg" class="smallpic"/>
        </span>
                <span class="smallback">
          <img src="static/img/one/8.jpg" class="smallpic"/>
        </span>
                <span class="smallleft">
          <img src="static/img/one/9.jpg" class="smallpic"/>
        </span>
                <span class="smallright">
          <img src="static/img/one/10.jpg" class="smallpic"/>
        </span>
                <span class="smalltop">
          <img src="static/img/one/11.jpg" class="smallpic"/>
        </span>
                <span class="smallbottom">
          <img src="static/img/one/12.jpg" class="smallpic"/>
        </span>
            </div>
        </div>

    </div>

</section>

<!-- Back top -->
<a href="#back-top" class="go-top"><i class="fa fa-angle-up"></i></a>

<!-- javscript js -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

<script src="js/vegas.min.js"></script>

<script src="js/wow.min.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/custom.js"></script>

<script type="text/javascript" src="static/js/tipso.min.js"></script>
<script type="text/javascript" src="static/js/index.js"></script>
<script src="../static/js/openTab.js"></script>
<script src="../static/js/click.js"></script>
</body>
</html>